<template>
    <div class="register">
         <video 
          class="myvideo"
          id="myvideo"
          autoplay
          loop
          muted
          playsInline
          src="@/assets/video/city.mp4" 
        ></video>

        <div class="login-box">
            <h3 class="title">欢迎注册</h3>
            <div class="box">
                <div>
                    <el-form
                        :label-width="80"
                        :model="form"
                        class="myform"
                        status-icon 
                        :rules="rules"
                        ref="myform"
                    >
                        <el-form-item label="用户名称"  prop="username">
                            <el-input 
                                type="text" 
                                placeholder="请输入" 
                                v-model="form.username"
                                :prefix-icon="User"    
                            ></el-input>
                        </el-form-item>
                         <el-form-item label="手机号码"  prop="phone">
                            <el-input 
                                type="text" 
                                placeholder="请输入" 
                                v-model="form.phone"
                                :prefix-icon="Phone"    
                            ></el-input>
                        </el-form-item>
                        <el-form-item label="登录密码" prop="password">
                            <el-input 
                                type="password"
                                placeholder="请输入" 
                                v-model="form.password"
                                show-password
                                :prefix-icon="Lock"
                                @blur="checkDbPass"    
                                ></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" prop="dbpass">
                            <el-input 
                                type="password"
                                placeholder="请输入" 
                                v-model="form.dbpass"
                                show-password
                                :prefix-icon="Lock"    
                                ></el-input>
                        </el-form-item>
                        <el-form-item>
                            <p class="flex">
                                <el-button type="primary" class="btn" @click="submitForm('myform')"
                                    >注册</el-button
                                >
                                <el-button type="danger" class="btn" @click="resetForm('myform')">重置</el-button>
                            </p>
                        </el-form-item>
                        <el-form-item class="lastitem">
                            <div class="links">
                                <router-link class="litem" :to="{name:'login'}">
                                    已有账号,立即登录
                                </router-link>
                                    <router-link class="litem color"  :to="{name:'forgetpass'}">
                                    忘记密码 
                                </router-link>
                            </div>
                        </el-form-item>
                    </el-form> 
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { ref,toRefs,reactive,onMounted } from 'vue'
import { Calendar, Phone ,User , Lock} from '@element-plus/icons'
import {toast} from "@/utils"
import {reg } from "@/utils/validate"
import {ajax} from "@/api"
import {useRouter} from "vue-router"
export default {
    setup(){
        const myform = ref()
        const router = useRouter()
        const state = reactive({
            form:{
                role:1
            },
            rules:{
                 username:[
                    {
                        required: true,
                        message: '请输入用户名',
                        trigger: 'blur',
                    },
                ],
                phone:[
                    {
                        required: true,
                        message: '请输入手机号',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.phone,
                        message:"请输入正确的手机号",
                        trigger:"blur"
                    }
                ],
                password:[
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    },
                    //  {
                    //     // 判断2次密码不一致
                    //     validator:function(rule,value,callback){
                    //         if(reg.pwd.test(state.form.dbpass)){
                    //             myform.value.validateField("dbpass")  // 调取dbpass 的正则 
                    //         }else{
                    //             callback()
                    //         }
                    //     },
                    //     trigger:'blur',
                    // }
                ],
                dbpass:[
                     {
                        required: true,
                        message: '请输入密码',
                        trigger: 'blur',
                    },
                    {
                        pattern:reg.pwd,
                        trigger:'blur',
                        message:"请输入6-16的数字字母密码组合"
                    },
                    {
                        validator:function(rule, value, callback){
                            // 
                             if(value!= state.form.password){
                                 callback(new Error("两次密码不一致"))
                             }else{
                                 callback()
                             }
                        },
                        trigger: 'blur',
                    }
                ]
            },
            User,
            Lock,
            Phone
        })

        const submitForm = ()=>{
            myform.value.validate(async valid=>{
                console.log(valid);
                if(valid){
                    // state.form.role = 1; //普通用户 用户权限
                    console.log(state.form)
                    const {code,result}  = await ajax.register(state.form)
                    if(code==200){
                        // gotopage("login")
                        router.push({name:'login',query:{username:state.form.username}})
                    }
                }else{
                    toast.error('请输入有效登录信息')
                }
            })
        }
        // 重置
        const resetForm = ()=>{
            myform.value.resetFields()
        }

          const checkDbPass = ()=>{
            //  myform.value.validateField("dbpass")
            if(state.form.dbpass!=""){
                 myform.value.validateField("dbpass")  // 密码去吊起确认密码的正则 比较2次 密码是否一致 
            }
        }

         const checktest = async ()=>{
            // ajax.testIndex()
            // .then(res=>{
                
            // })
            let res = await ajax.testIndex();
            console.log(res)
        }


        onMounted(()=>{
          checktest()
        })
        return{
            ...toRefs(state),
            myform,
            resetForm,
            submitForm,
            checkDbPass
        }
    }
}
</script>


<style lang="scss"  >
.register{
  width:100%;
  height:100%;
    .myvideo{
        min-width: 100%;
        min-height: 100%;
        height: auto;
        width: auto;
        position: fixed;
        right: 0;
        bottom: 0;
        z-index: 0;
    }
    .login-box{
        position: absolute;
        width:390px;
        height:440px;
        // min-height:340px;
        border:1px solid darkkhaki;
        border-radius: 8px;
        padding:15px;
        background: rgba(0, 0, 0, 0.2);
        left:0;
        right:0;
        bottom:0;
        top:0;
        margin:auto;
        .title{
            font-size:26px;
            text-align: center;
            font-weight: 500;
            color:#fff;
        }
        .box{
            margin-top:20px;
            .el-tabs__nav {
                width:100%;
                .el-tabs__active-bar{
                    background-color: darkorange;
                }
                .el-tabs__item{
                    flex:1;
                    width:50%;
                    text-align: center;
                    color:#fff;
                }
                .is-active{
                    color:darkorange;
                }
            }
            .myform{
                .el-form-item__label{
                    color:#fff;
                }
                .el-input__icon{
                    color:#fff;
                }
                .el-input__inner{
                    background: transparent;
                    color:#fff;
                }

                .flex{
                    display: flex;
                    .btn{
                        flex:1;
                    }
                }
                .lastitem{
                    margin-bottom: 0;
                    height:20px;
                    ::v-deep .el-form-item__content{
                        line-height:1 !important;
                        height:20px;
                    }
                    .links{
                        display: flex;
                        justify-content: space-between;
                        .litem{
                            font-size: 12px;
                            color:darkorange;
                        }
                        .color{
                            color:#fff;
                        }
                    }
                }
            }
        }
    }
}


.lastitem{
    ::v-deep .el-form-item__content{
        line-height:1;
    }

}
</style>
